<template>
  <a-modal
    :visible="visible"
    title="添加团队"
    :unmount-on-close="true"
    :mask-closable="false"
    width="420px"
    class="mydialog"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <a-form ref="teamRef" :model="formData" auto-label-width class="add-form">
      <a-form-item
        field="name"
        label="团队"
        validate-trigger="input"
        :rules="[
          {
            required: true,
            message: '团队名称必填',
          },
        ]"
      >
        <a-input v-model="formData.name" placeholder="请输入" />
      </a-form-item>

      <a-form-item field="userIds" label="团队成员">
        <user-selector
          v-model="formData.userIds"
          :project-id="formData.projectId"
          multiple
        />
      </a-form-item>

      <a-form-item
        field="role"
        label="团队权限配置"
        content-class="permission-item"
        required
      >
        <a-radio-group v-model="formData.role" direction="vertical">
          <a-radio :value="1">
            <span>查看</span>
            <permission-icon :active-count="1" />
          </a-radio>
          <a-radio :value="2">
            <span>编辑</span>
            <permission-icon :active-count="2" />
          </a-radio>
          <a-radio :value="3">
            <span>共享</span>
            <permission-icon :active-count="3" />
          </a-radio>
          <a-radio :value="4">
            <span>管理</span>
            <permission-icon :active-count="4" />
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { Message } from '@arco-design/web-vue';
  import UserSelector from '@/components/user-selector/index.vue';
  import PermissionIcon from './permission-icon.vue';
  import { TeamRecord, saveTeam } from '../api';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
    },
  });
  const emit = defineEmits(['update:visible', 'refresh']);

  const formData = ref<TeamRecord>({ ...props.form } as TeamRecord);
  watch(
    () => props.form,
    (n) => {
      formData.value = { ...n } as TeamRecord;
    }
  );

  const teamRef = ref<FormInstance>();

  // 新增团队
  const handleAdd = async () => {
    const userIdsAry = formData.value.userIds
      ? formData.value.userIds.split(',')
      : [];
    const teamUsers = userIdsAry?.map((id) => {
      return { id, role: formData.value.role };
    });

    const params = {
      projectId: formData.value.projectId,
      name: formData.value.name,
      color: formData.value.color,
      role: formData.value.role,
      teamUsers,
      count: userIdsAry?.length,
    };
    const res = await saveTeam(params);
    return !!res.status;
  };

  // 提交事件处理
  const handleBeforeOk = async (done: any) => {
    const res = await teamRef.value?.validate();
    if (!res) {
      const flg = await handleAdd();
      if (flg) {
        Message.success('添加成功');
        emit('update:visible', false);
        emit('refresh');
      }
      done();
    }
  };

  // 关闭弹窗
  const handleCancel = () => {
    emit('update:visible', false);
  };
</script>

<style lang="less" scoped>
  .mydialog {
    .add-form {
      :deep(.arco-row) {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  /* TODO 按钮border-radius无法覆盖 */

  :deep(.permission-item) {
    .arco-radio-label {
      display: flex;
    }
  }
</style>
